<template>
	<view>
		<view class="binding">
			<template v-if="state">
				<!-- <view class="u-p-t-10 u-p-l-30 u-p-r-30 u-p-b-30" v-if="form.authstate == '已驳回'">
					<u-alert-tips type="warning" :show-icon="true" title="认证驳回" :description="`驳回原因：${form.reason}`"></u-alert-tips>
				</view> -->
				<view class="container">
					<view class="u-text-center u-p-t-80 u-p-b-40">
						<!-- <view><u-icon name="info-circle-fill" size="200" color="#ff9900"></u-icon></view> -->
						<view>
							<view class="u-m-t-30 u-font-36">请输入您要绑定（新建）的客户组名称</view>
							<view class="u-m-t-15 u-m-b-15 u-font-28">如要绑定已有客户组则需要管理员后台审核</view>
						</view>
					</view>
					<view>
						<u-form :model="form" ref="uForm" label-width="200">
							<u-form-item label="客户组名称">
								<u-input v-model="form.name" />
							</u-form-item>
							<u-form-item label="部门名称">
								<u-input v-model="form.departmentName" />
							</u-form-item>
							<u-form-item label="所在地区">
								<u-input v-model="form.cityName" type="select" border="border" class="input" @click="cityshow = true"
									:customStyle="{'padding-top': '6rpx','padding-bottom': '6rpx'}"
									placeholder="请选择客户组地区" />
							</u-form-item>
						</u-form>
					</view>
					<view class="" style="margin-top: 66rpx;">
						
						<view class="">
							<button open-type="contact" hover-class="none" class="u-reset-button btn-box">
								{{title}}
							</button>
						</view>
					</view>
					<view class="u-p-b-30 u-p-t-60">
						<u-button type="primary" size="default" @click="submit">提交</u-button>
					</view>
					<view>
						<u-button size="default" @click="back">返回上一页</u-button>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="container">
					<view class="u-text-center u-p-t-80 u-p-b-40">
						<view><u-icon name="info-circle-fill" size="200" color="#ff9900"></u-icon></view>
						<view>
							<view class="u-m-t-30 u-font-36">绑定审核中</view>
							<view class="u-m-t-15 u-m-b-15 u-font-28">请耐心等待管理员审核确认</view>
							<view class="u-m-t-15 u-m-b-15 u-font-28">客户组：{{ form.name }}</view>
						</view>
					</view>
					
					<view class="u-p-30">
						<view class="u-flex">
							<view class="u-flex-1 u-p-r-15">
								<u-button size="default" @click="back">返回上一页</u-button>
							</view>
							<view class="u-flex-1 u-p-l-15">
								<u-button type="error" size="default" @click="cancel">取消绑定</u-button>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
		<!-- 选择所在地区 -->
		<citypicker ref="citypicker" :show="cityshow" @select="getSelectCity" @close="cityshow = false"></citypicker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'换绑客户组有问题，点击联系客服',
				state: false,
				form:{
					name: '', //客户组名称
					departmentName: '', //部门名称
					cityName: '', //地区名称
					cityPath: '', //地区id
				},
				// 选择地区
				cityshow: false
			}
		},
		onLoad() {
			this.getBindingData()
		},
		methods: {
			getBindingData(){
				return this.$u.get('/User/GetBindingData').then((res)=>{
					this.form = res
					if(res.success == false){
						this.state = true
					}else{
						this.state = false
					}
				})
			},
			getSelectCity(arr) { //城市选择回调函数
				console.log(arr)
				this.cityshow = false
				// this.selectArea = '';
				let cityidArr = [];
				let getArr = arr.filter(n => n.id != 0)
				let areaname = '';
				getArr.forEach((item, index) => {
					if (index == getArr.length - 1) {
						areaname += item.name
					} else {
						areaname += item.name + '-'
					}
					cityidArr.push(item.id);
				});
				if (cityidArr.length > 0)
					// this.form.cityPath = cityidArr[cityidArr.length - 1];
					this.form.cityPath = cityidArr.join(',');
				if (areaname)
					// this.form.cityName = areaname;
					this.form.cityName = areaname.split("-")[areaname.split("-").length - 1]
			},
			quit(){
				uni.removeStorageSync('lifeData');
				
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			back(){
				uni.navigateBack()
			},
			submit(){
				uni.showModal({
					title: '提示',
					content: '您确定要绑定客户组吗?',
					success: (res) => {
						if (res.confirm) {
							this.$u.post('/User/BindingEnterprise',this.form).then((res)=>{
								uni.showToast({
									title: '申请提交成功'
								})
								this.getBindingData().then(()=>{
									// uni.showModal({
									// 	content:'您已成功绑定客户组',
									// 	showCancel: false,
									// 	success: (res)=>{
									// 		if (res.confirm) {
									// 			uni.navigateBack()
									// 		}
									// 	}
									// })
								})
								
							})
						}
					}
				})
			},
			cancel(){
				uni.showModal({
					title: '提示',
					content: '您确定要取消绑定吗?',
					success: (res) => {
						if (res.confirm) {
							this.$u.post('/User/CancelBindingEnterprise').then((res)=>{
								uni.showToast({
									title: '提交成功'
								})
								setTimeout(()=>{
									uni.navigateBack()
								},500)
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.binding{
		min-height: 100vh;
		background-color: #fff;
	}
	.container{
		background-color: #fff;
		padding: 0 30rpx;
	}
	.btn-box{
		display: flex;
		    flex-direction: row;
		    align-items: center;
		    padding: 16rpx 30rpx;
		    border-radius: 8rpx;
		    position: relative;
		    transition: all 0.3s linear;
		    border: 1px solid #fff;
			border-color: #fcbd71;
			background-color: #fdf6ec;
			
	}
</style>
